<template>
  <div class="myContainer">
    <el-tabs type="border-card">
      <el-tab-pane label="基础设置">
        <el-row class="mymarginTop_10px">
          <el-col class="myTitleText">员工抢单设置 :</el-col>
        </el-row>
        <el-row class="mymarginTop_10px">
          <el-col :span="3" class="myLeftMsg">
            设定抢单时间 :
          </el-col>
          <el-col :span="8">
            <template>
              <el-input-number v-model="affairSettingDetail.grabtime" :min="1" :max="10" label="抢单时间"></el-input-number>
            </template>
            分钟
          </el-col>
        </el-row> 
        <el-row class="mymarginTop_10px">
          <el-col class="myTitleText">工单缺省设置 :</el-col>
        </el-row>
        <el-row class="mymarginTop_10px">
          <el-col :span="3" class="myLeftMsg">
            工单处理时间 :
          </el-col>
          <el-col :span="8">
            <template>
              <el-input-number v-model="affairSettingDetail.affair_timeout" :min="1" :max="10" label="工单处理时间"></el-input-number>
            </template>
            小时
          </el-col>
        </el-row> 
        <el-row class="mymarginTop_10px">
          <el-col :span="3" class="myLeftMsg">
            工单处理等级 :
          </el-col>
          <el-col :span="3">
            <template>
              <el-select v-model="affairSettingDetail.affair_level" placeholder="请选择">
                <el-option
                  v-for="item in affairSettingAlarmLeveOpts"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-col>
        </el-row> 
        <hr/>
        <el-row class="mymarginTop_10px">
          <el-col class="myTitleText">报事设置 :</el-col>
        </el-row>
        <el-row class="mymarginTop_10px">
          <el-col :span="3" class="myLeftMsg">
            责任人 :
          </el-col>
          <el-col :span="8">
            <LinkagePeople 
              v-if="flag"
              :datamsg="affairSettingDetail.post_it_chargerule"
              @getChildData="getComplaint_post_it_chargerule">
            </LinkagePeople>
          </el-col>
        </el-row>
        <el-row class="mymarginTop_10px">
          <el-col :span="3" class="myLeftMsg">
            处理人 :
          </el-col>
          <el-col :span="8">
            <LinkagePeople 
              v-if="flag"
              :datamsg="affairSettingDetail.post_it_dealrule"
              @getChildData="getComplaint_post_it_dealrule">
            </LinkagePeople>
          </el-col>
        </el-row>
        <el-row class="mymarginTop_10px">
          <el-col :span="3" class="myLeftMsg">
            逾期推送 :
          </el-col>
          <el-col :span="8">
            <OverduePush 
              v-if="flag" 
              :overduePushInitialData="post_it_noticerule" 
              @getChildData="onGetOverduePush_post_it_noticerule">
            </OverduePush>
          </el-col>
        </el-row> 
        <hr/>
        <el-row class="mymarginTop_10px">
          <el-col class="myTitleText">报修设置 :</el-col>
        </el-row>
        <el-row class="mymarginTop_10px">
          <el-col :span="3" class="myLeftMsg">
            责任人 :
          </el-col>
          <el-col :span="8">
            <LinkagePeople 
              v-if="flag"
              :datamsg="affairSettingDetail.repair_chargerule"
              @getChildData="getComplaint_repair_chargerule">
            </LinkagePeople>
          </el-col>
        </el-row>
        <el-row class="mymarginTop_10px">
          <el-col :span="3" class="myLeftMsg">
            处理人 :
          </el-col>
          <el-col :span="8">
            <LinkagePeople 
              v-if="flag"
              :datamsg="affairSettingDetail.repair_dealrule"
              @getChildData="getComplaint_repair_dealrule">
            </LinkagePeople>
          </el-col>
        </el-row>
        <el-row class="mymarginTop_10px">
          <el-col :span="3" class="myLeftMsg">
            逾期推送 :
          </el-col>
          <el-col :span="8">
            <OverduePush 
              v-if="flag" 
              :overduePushInitialData="repair_noticerule" 
              @getChildData="onGetOverduePush_repair_noticerule">
            </OverduePush>
          </el-col>
        </el-row> 
        <hr/>
        <el-row class="mymarginTop_10px">
          <el-col class="myTitleText">投诉设置 :</el-col>
        </el-row>
        <el-row class="mymarginTop_10px">
          <el-col :span="3" class="myLeftMsg">
            责任人 :
          </el-col>
          <el-col :span="8">
            <LinkagePeople 
              v-if="flag"
              :datamsg="affairSettingDetail.complaint_chargerule"
              @getChildData="getComplaint_complaint_chargerule">
            </LinkagePeople>
          </el-col>
        </el-row>
        <el-row class="mymarginTop_10px">
          <el-col :span="3" class="myLeftMsg">
            处理人 :
          </el-col>
          <el-col :span="8">
            <LinkagePeople 
              v-if="flag"
              :datamsg="affairSettingDetail.complaint_dealrule"
              @getChildData="getComplaint_complaint_dealrule">
            </LinkagePeople>
          </el-col>
        </el-row>
        <el-row class="mymarginTop_10px">
          <el-col :span="3" class="myLeftMsg">
            逾期推送 :
          </el-col>
          <el-col :span="8">
            <OverduePush 
              v-if="flag" 
              :overduePushInitialData="complaint_noticerule" 
              @getChildData="onGetOverduePush">
            </OverduePush>
          </el-col>
        </el-row> 
        <hr/>

        <el-row class="mymarginTop_10px">
          <el-col :offset="3">
            <el-button @click="handleAffairSettingSaveClick" type="primary" class="myBgGreen" v-if="isShow(245)">保存设置</el-button>
          </el-col>
        </el-row>
      </el-tab-pane> 
      <el-tab-pane label="类别管理">
        <el-row class="mymarginTop_10px" :gutter="10"> 
          <el-col :span="4">
            <template>
              <el-select v-model="worklistType" clearable placeholder="全部工单类型">
                <el-option
                  v-for="item in worklistOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-col>
          <el-col :span="4">
            <el-input placeholder="请输入类别名称" v-model="kw"></el-input>
          </el-col>
          <el-col :span="4"> 
            <el-button type="primary" class="myBgGreen" @click="serach">查 询</el-button>
          </el-col>
        </el-row>
        <el-row class="mymarginTop_10px">
          <el-col>
            <template>
              <el-table
                border
                stripe
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  label="序号"
                  type="index"
                  width="100">
                </el-table-column>
                <el-table-column
                  label="隶属类型"
                  prop="affair_type_name">
                </el-table-column>
                <el-table-column
                  label="类别名称"
                  prop="subtype_name">
                </el-table-column>
                <el-table-column
                  label="显示顺序"
                  prop="sort">
                </el-table-column>
                <el-table-column
                  label="类别描述"
                  prop="subtype_desc">
                </el-table-column>
                <el-table-column
                  label="缩略图"
                  prop="icon_url">
                  <template scope="scope">
                    <img :src='QINIU_API + scope.row.icon_url' width="50">
                  </template>
                </el-table-column>
                <el-table-column
                  label="功能操作"
                  width="100">
                  <template scope="scope">
                    <el-button class="look" type="text" size="small" @click="update(scope.row)">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>

            <div class="block">                    
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page_num"
                :page-sizes="[10, 15]"
                :page-size="page_size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
          </el-col>
        </el-row> 
      </el-tab-pane>
    </el-tabs>
    
    <el-dialog title="类别编辑" class="myRoleDialog" :visible.sync="typeDialog">
      <div class="mymarginTop_10px">
        <el-row class="myPaddingBottom_10px">
          <el-col :span="5" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            隶属类型 :
          </el-col>
          <el-col :span="19">
            <el-input placeholder="隶属类型" v-model="affair_type_name" disabled></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="5" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            类别名称 :
          </el-col>
          <el-col :span="19">
            <el-input placeholder="类别名称" v-model="subtype_name" disabled></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="5" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            显示顺序 :
          </el-col>
          <el-col :span="19">
            <el-input placeholder="显示顺序" v-model="sort"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="5" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            缩略图 :
          </el-col>
          <el-col :span="19">
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :data="postData"
              :on-success="handleAvatarSuccess">
              <img v-if="thumbnailUrl" :src="thumbnailUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="5" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            类别描述 :
          </el-col>
          <el-col :span="19">
            <el-input type="textarea" placeholder="类别描述" v-model="subtype_desc"></el-input>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="seva">保存</el-button>
        <el-button @click="typeDialog = false">取 消</el-button>
      </div>
    </el-dialog> 
 
  </div>
</template>  

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myLineHeight_45px{
    line-height: 45px;    
  }
  .mymarginTop_10px{
    margin-top: 10px;
  }
  .myTitleText{
    font-weight: 500;
  }
  .myLineHeight_36px{
    line-height: 36px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myOV_y_400px{
    height: 400px;
    overflow-y: scroll;
    border:1px solid #f2f2f2;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }
  hr{
    background: #f2f2f2;
    border:none;
    height: 1px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
  import { getAffairSetting, setAffairSetting , getSubtypeList , updateSubtype } from '@/api/affair_setting';
  import { QINIU_API , QINIU_UP_API } from '@/config/baseUrl';
  import LinkagePeople from 'components/LinkagePeople.vue';
  import OverduePush from 'components/OverduePush.vue';
  import { getQNToken } from '@/api/contentMGT';

  export default {
     data(){
      return{
        // 基础设置
        affairSettingLoading: false,
        affairSettingDetail: {
          
        },
        affairSettingAlarmLeveOpts:[
        {"label": "一般", "value": "0"},
        {"label": "紧急", "value": "1"},
        {"label": "非常紧急", "value": "2"}
        ],

        // 责任人弹出框
        dutyType: '',
        dutyDlgListLoading: false,
        dutyDlgList: [],
        dutyDlgProps: {
          children: 'children',
          label: 'user_name'
        },

        // 类别及类型设置
        num:1,
        value1:true,
        value2:true,
        value3:true,
        num1:1,
        value:"",
        newDutyDialogVisible:false,
        radio1:1,
        checkList:[],
        tableData:[],
        page_num:1,
        page_size:10,
        total:null,
        add_editDialogVisible:false,
        value4:"",
        options4:[],
        add_edit_3_DialogVisible:false,
        value5:"",
        options5:[],

        //报事类型
        reportType:"",
        updateReportId:"",
        reportTableData:[],
        type_name:"",
        type_code:"",
        type_desc:"",

        //报修类型
        repairTableData:[],
        repairDialog:false,
        repair_type_name:"",
        repair_type_code:"",
        repair_type_desc:"",
        repairType:"",
        updateRepairId:"",
        postItOverduePush:null,
        testOverduePushInitialData:[], 
        testdata:{},
        complaint_chargeuser:{},
        repair_chargeuser:{},
        post_it_chargeuser:{},
        repair_chargerule:{},
        post_it_noticerule:[],
        repair_noticerule:[],
        complaint_noticerule:[],

        complaint_chargerule_scopetype:"",
        complaint_chargerule_scopeitem:[],
        complaint_chargerule_subscopetype:"",
        complaint_chargerule_subscopeitem:[],

        flag:false,
        worklistType:"",
        worklistOptions:[
          {label:"报修类",value:"1"},
          {label:"报事类",value:"2"},
          {label:"投诉类",value:"3"},
          {label:"查询咨询类",value:"4"},
          {label:"其他类",value:"5"}
        ],
        kw:"",
        affair_type:"",
        tableData:[],
        QINIU_API:QINIU_API,
        typeDialog:false,
        subtype_name:"",
        affair_type_name:"",
        sort:"",
        subtype_desc:"",
        uploadUrl:QINIU_UP_API,
        thumbnailUrl:"",
        postData:{
          token:""
        },
        saveImageUrl:"",
        affair_subtype_id:""
      }
    },
    watch: {
      
    },
    created(){
      document.title="系统设置";
      
      this.fetchAffairSetting();

      this.ongetSubtypeList();

      this.ongetQNToken();
    },
    components: {
      LinkagePeople,OverduePush
    },
    methods:{
      ongetQNToken(){//上传图片之前拉取的token 
        let vm=this;
        getQNToken().then(response => {
          let res=response.data.up_token;
          vm.postData.token=res;
        }).catch(error => {})
      },
      fetchAffairSetting() {
        let vm = this;
        vm.affairSettingLoading = true;
        getAffairSetting()
        .then(response => {
          vm.affairSettingDetail = response.data;
          vm.complaint_noticerule=response.data.complaint_noticerule?response.data.complaint_noticerule:[];
          vm.repair_noticerule=response.data.repair_noticerule?response.data.repair_noticerule:[];
          vm.post_it_noticerule=response.data.post_it_noticerule?response.data.post_it_noticerule:[];
          vm.affairSettingDetail.affair_level += '';
          vm.affairSettingLoading = false;
          vm.flag=true;
        })
        .catch(error => {
          vm.affairSettingLoading = false;
        })
      },
      setAffairSetting() {
        let vm = this;
        vm.affairSettingLoading = true;
        setAffairSetting(vm.affairSettingDetail)
        .then(response => {
          vm.$message.success("执行成功！");
          vm.affairSettingLoading = false;
        })
        .catch(error => {
          vm.$message.error("执行失败！");
          vm.affairSettingLoading = false;
        })
      },
      getComplaint_repair_chargerule(val){//报修责任人
        this.affairSettingDetail.repair_chargerule=val;
      },
      getComplaint_repair_dealrule(val){//报修处理人
        this.affairSettingDetail.repair_dealrule=val;
      },
      getComplaint_complaint_chargerule(val){//投诉责任人
        this.affairSettingDetail.complaint_chargerule=val;
      },
      getComplaint_complaint_dealrule(val){//投诉处理人
        this.affairSettingDetail.complaint_dealrule=val;
      },
      getComplaint_post_it_chargerule(val){//报事责任人
        this.affairSettingDetail.post_it_chargerule=val;
      },
      getComplaint_post_it_dealrule(val){//报事处理人
        this.affairSettingDetail.post_it_dealrule=val;
      },
      handleAffairSettingSaveClick() {//保存
        this.setAffairSetting();
      },
      handleSizeChange(val) {//每页条数控制
        this.page_size = val;
        this.ongetSubtypeList();
      },
      handleCurrentChange(val) {//每页
        this.page_num = val;
        this.ongetSubtypeList();
      },
      onGetOverduePush(val){
        this.affairSettingDetail.complaint_noticerule=val;
      },
      onGetOverduePush_repair_noticerule(val){
        this.affairSettingDetail.repair_noticerule=val;
      },
      onGetOverduePush_post_it_noticerule(val){
        this.affairSettingDetail.post_it_noticerule=val;
      },
      ongetSubtypeList(){
        let vm=this;
        let params={
          kw:vm.kw,
          page_size:vm.page_size,
          page_num:vm.page_num,
          affair_type:vm.worklistType
        }
        getSubtypeList(params).then(response => {
          let res=response.data;
          vm.tableData=res.rows;
          vm.total=res.total;
          vm.page_num=res.page_num;
          vm.page_size=res.page_size;
        }).catch(error => {})
      },
      serach(){
        this.ongetSubtypeList();
      },
      update(item){
        let vm=this;
        vm.subtype_name=item.subtype_name;
        vm.affair_type_name=item.affair_type_name;
        vm.sort=item.sort;
        vm.thumbnailUrl=QINIU_API+item.icon_url;
        vm.subtype_desc=item.subtype_desc;
        vm.saveImageUrl=item.icon_url;
        vm.affair_subtype_id=item.affair_subtype_id;
        vm.typeDialog=true;
      },
      seva(){
        let vm=this;
        let params={
          sort:vm.sort,
          icon_url:vm.saveImageUrl,
          subtype_desc:vm.subtype_desc
        }
        updateSubtype(vm.affair_subtype_id,params).then(response => {
          vm.$message.success("执行成功！");
          vm.ongetSubtypeList();
          vm.typeDialog=false;
        }).catch(error => {
          vm.$message.success("执行失败！"+error.response.data.error_msg);
        })
      },
      handleAvatarSuccess(res, file) {
        //this.thumbnailUrl = URL.createObjectURL(file.raw);
        this.saveImageUrl=res.key;
        this.thumbnailUrl = QINIU_API + res.key;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isJPG || isPNG) && isLt2M;
      },
    }

  }

</script>  


